﻿<link rel="stylesheet" href="<?php echo APP_TEMPLATES_URL;?>/css/mui.min.css">
<script src="<?php echo APP_TEMPLATES_URL;?>/js/mui.min.js"></script>
<script type="text/javascript" src="<?php echo APP_SITE_URL;?>/js/zepto.min.js"></script>
<script type="text/javascript" src="<?php echo APP_SITE_URL;?>/js/template.js"></script>

<style>
.fenleigoods{ float: left; width: 100%; background: #F4F4F4; padding: 10px;}
.fenleigoods li{ float: left; width: 49%; line-height: 25px; padding-bottom: 20px; border: 1px solid #EEEEEE; background: #FFFFFF; margin-bottom: 10px; }
.fenleigoods li:nth-of-type(odd){ margin-right: 2%;}
.fenleigoods li p{padding-left: 10px;}
p{margin: 0;}
	
.ltpaixu{ float: left; width: 100%; padding:0 20px; border-bottom: 1px solid #EEEEEE;background-color: #FFFFFF;}
.ltpaixu li{ float: left; width: 33.3%; text-align: center;}
.ltpaixu li p { width: 90%; margin: 0 auto;line-height: 36px; font-size:15px ; color: #707070;}
.ltpaixu li p img{display: none;}
.index p{ border-bottom: #c0a062 3px solid; color: #c0a062;}
.index img{display: inline !important;}
.mui-pull-bottom-pocket{ height: 20px; bottom: 1.5px;border-top: 1px solid #eee;}
.mui-pull{bottom: -2px;}
.height69{display: none;}
input,p{font-family: 'Microsoft Yahei',Tahoma,Verdana;}
</style>
<style>
	.fandajin-btn {
    float: left;
    background: url(<?php echo APP_TEMPLATES_URL;?>/images/index_09.png) no-repeat center;
    position: relative;
    margin-top: 15px;
    z-index: 9999;
    margin-left: -3px;
    height: 28px;
    width: 22px;
    background-size: 25px;
}
.mui-bar .mui-title{
	right: 0px;
	left: 45px !important;
}
</style>
<style>
	.fandajin-btn {
		float: right;
		background: url(<?php echo APP_TEMPLATES_URL;?>/images/index_09.png) no-repeat center;
		position: relative;
		margin-top: 12px;
		z-index: 9;
		margin-left: -15%;
		left: -3.5%;
		height: 28px;
		width: 22px;
		background-size: 22px;
		border: none;
	}
	
	.mui-bar .mui-title {
		left: 45px !important;
	}
</style>
	<script type="text/javascript" charset="utf-8">
		function changeOrder(key){
			var order='';
			var ckey = "<?php echo $_GET['key'];?>"==''?"rate":"<?php echo $_GET['key'];?>";
			var corder = "<?php echo $_GET['order'];?>";

			if(key==ckey){//切换排序
				order = corder=='asc'?'desc':'asc';
			}else{
				order = 'desc';
			}
			var str_url = "index.php?act=goods&gc_id=<?php echo $_GET['gc_id'];?>&gc_name=<?php echo $_GET['gc_name'];?>&key="+key+"&order="+order;
			window.location.href = str_url;
		}
		function goback(){
//			var str_url = "index.php?act=index";
//			window.location.href = str_url;
			history.go(-1);
		}
		mui('body').on('tap','a',function(){document.location.href=this.href;});
    </script>


<!-- 公告 -->
	<div style="padding: 12px 10px; background: #f8f8f8; font-size: 14px; border-bottom: 1px solid #f4f4f4;" class="mui-input-row mui-search">
		<form method="get" action="index.php">
		<button class="fandajin-btn" href="index.php" type="submit"></button>
			<input id="act" name="act" type="hidden" value="search" />
			<input id="op" name="op" type="hidden" value="index" />
			<input id="sousuo" name="keyword" style="padding-left: 15px; width: 100%;height: 50px; border: 1px solid #e8e8e8; border-radius: 3px;margin: 0;" type="text" placeholder="商品搜索：请输入商品关键字" />
		</form>
	</div>
	
		<!-- 导航 -->		

			<ul class="ltpaixu">
				<li class="<?php if($_GET['key']=='rate' || $_GET['key']==''){echo 'index';}?>" onclick="changeOrder('rate');" style="cursor: pointer"><p>收益率</p></li>
				<li class="<?php if($_GET['key']=='price'){echo 'index';}?>" onclick="changeOrder('price');" style="cursor: pointer"><p>价格<img style="vertical-align:middle; margin-top: -4px; margin-left: 2px; width: 12px;" src="<?php echo APP_TEMPLATES_URL;?>/images/list_<?php echo $_GET['key']=='price' && $_GET['order']=='desc'? "03" : '031';?>.png"/></p></li>
				<li class="<?php if($_GET['key']=='sales'){echo 'index';}?>" onclick="changeOrder('sales');" style="cursor: pointer"><p>销量<img style="vertical-align:middle; margin-top: -4px; margin-left: 2px; width: 12px;" src="<?php echo APP_TEMPLATES_URL;?>/images/list_<?php echo $_GET['key']=='sales' && $_GET['order']=='desc'? "03" : '031';?>.png"/></p></li>
			</ul>
			
				<!--
                	时间：2016-11-07
                	描述：分类
               -->


			<div class="mui-content" style="padding-top: 0;">
				<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="top: 161px;background-color: #FFFFFF;    position: inherit;">
					<div class="mui-scroll">
							<ul class="fenleigoods" id="product_content">
								<!--
                                	作者：1256149364@qq.com
                                	时间：2017-03-09
                                	描述：
                                
								<?php foreach ($output['goods_list_category'] as $_value) { ?>
								<li>
									<a href="index.php?act=goods&op=goods_detail&goods_id=<?php echo $_value['goods_id']; ?>"><img style="max-width: 100%;" src="<?php echo cthumb($_value['goods_image'], 265, $_value['store_id']);?>" /></a>
									<p style="color: #555555; font-size: 14px;"><?php echo $_value['goods_name']; ?></p>
									<p style="color: #c10a1f; font-size: 16px;">￥<?php echo $_value['goods_price']; ?></p>
									<p style="color: #f9b800; font-size: 13px;">年收益<?php echo $_value['year_rate']; ?>%</p>
								</li>
								<?php } ?>
								-->
								
								<li>
									<a href="index.php?act=goods&op=goods_detail&goods_id=88"><img style="max-width: 100%;" src="<?php echo APP_TEMPLATES_URL;?>/images/gc_03.jpg" /></a>
									<p style="color: #999999; font-size: 14px;margin-top: 10px;">兰花吊坠</p>
									<p style="color: #000000; font-size: 16px;">￥123000</p>
								</li>
								
								<li>
									<a href="index.php?act=goods&op=goods_detail&goods_id=88"><img style="max-width: 100%;" src="<?php echo APP_TEMPLATES_URL;?>/images/gc_03.jpg" /></a>
									<p style="color: #999999; font-size: 14px;margin-top: 10px;">兰花吊坠</p>
									<p style="color: #000000; font-size: 16px;">￥123</p>
								</li>
								
								<li>
									<a href="index.php?act=goods&op=goods_detail&goods_id=88"><img style="max-width: 100%;" src="<?php echo APP_TEMPLATES_URL;?>/images/gc_03.jpg" /></a>
									<p style="color: #999999; font-size: 14px;margin-top: 10px;">123</p>
									<p style="color: #000000; font-size: 16px;">￥123</p>
								</li>
								
								<li>
									<a href="index.php?act=goods&op=goods_detail&goods_id=88"><img style="max-width: 100%;" src="<?php echo APP_TEMPLATES_URL;?>/images/gc_03.jpg" /></a>
									<p style="color: #999999; font-size: 14px;margin-top: 10px;">123</p>
									<p style="color: #000000; font-size: 16px;">￥123</p>
								</li>
								
								<li>
									<a href="index.php?act=goods&op=goods_detail&goods_id=88"><img style="max-width: 100%;" src="<?php echo APP_TEMPLATES_URL;?>/images/gc_03.jpg" /></a>
									<p style="color: #999999; font-size: 14px;margin-top: 10px;">123</p>
									<p style="color: #000000; font-size: 16px;">￥123</p>
								</li>
								
								<li>
									<a href="index.php?act=goods&op=goods_detail&goods_id=88"><img style="max-width: 100%;" src="<?php echo APP_TEMPLATES_URL;?>/images/gc_03.jpg" /></a>
									<p style="color: #999999; font-size: 14px;margin-top: 10px;">123</p>
									<p style="color: #000000; font-size: 16px;">￥123</p>
								</li>
								
								<li>
									<a href="index.php?act=goods&op=goods_detail&goods_id=88"><img style="max-width: 100%;" src="<?php echo APP_TEMPLATES_URL;?>/images/gc_03.jpg" /></a>
									<p style="color: #999999; font-size: 14px;margin-top: 10px;">123</p>
									<p style="color: #000000; font-size: 16px;">￥123</p>
								</li>
								
								<li>
									<a href="index.php?act=goods&op=goods_detail&goods_id=88"><img style="max-width: 100%;" src="<?php echo APP_TEMPLATES_URL;?>/images/gc_03.jpg" /></a>
									<p style="color: #999999; font-size: 14px;margin-top: 10px;">123</p>
									<p style="color: #000000; font-size: 16px;">￥123</p>
								</li>									
									
							</ul>
					</div>
				</div>
			</div>
		<div style="background: #EEEEEE; clear: both;"></div>

<script type="text/html" id="record-list">
	<%
	if(goods_list.length >0){
	for (var i = 0;i<goods_list.length;i++){
	%>
	<li>
		<a href="index.php?act=goods&op=goods_detail&goods_id=<%=goods_list[i].goods_id%>"><img style="max-width: 100%;" src="<%=goods_list[i].goods_image_url%>" /></a>
		<p style="color: #555555; font-size: 14px;"><%=goods_list[i].goods_name%></p>
		<p style="color: #c10a1f; font-size: 16px;">￥<%=goods_list[i].goods_price%></p>
		<p style="color: #f9b800; font-size: 13px;">年收益<%=goods_list[i].year_rate%>%</p>
	</li>
	<% }
	}%>
</script>

<script type="application/javascript">
	var curpage = 1;
	var totalPage = <?php echo $output['totalPage']; ?>;
	mui.init({
		pullRefresh: {
			container: '#pullrefresh',
			up: {
				contentrefresh: '正在加载...',
				callback: pullupRefresh
			}
		}
	});
	var count = 0;
	/**
	 * 上拉加载具体业务实现
	 */
	function pullupRefresh() {
		setTimeout(function() {
			mui('#pullrefresh').pullRefresh().endPullupToRefresh((totalPage<=curpage)); //参数为true代表没有更多数据了。
			if(totalPage>curpage) {
				$.getJSON("index.php?act=goods&op=indexPage&gc_id=<?php echo $_GET['gc_id'];?>&curpage="+curpage+"&key=<?php echo $_GET['key'];?>&order=<?php echo $_GET['order'];?>", function (e) {
					curpage = e.datas.curpage;
					$("#product_content").append(template.render("record-list", e.datas));
				});
			}
		}, 1500);
	}
</script>